<template>
    <div class="mmv-op-card">
        <a class="mmv-op-card__link" href target="_blank">
            <span class="mmv-op-card__label">{{card.official_type | official_type}}</span>
            <p class="mmv-op-card__title">{{card.subject}}</p>
        </a>
    </div>
</template>

<script>
export default {
    filters: {
        official_type(official_type) {
            const obj = {
                1: "公告",
                2: "活动",
                3: "资讯",
            };
            return obj[official_type];
        },
    },
    props: {
        card: {
            type: Object,
            required: true,
        },
    },
};
</script>

<style lang="less">
.mmv-op-card {
    &__link {
        display: flex;
        align-items: center;
        color: #333;
    }
    &__label {
        display: inline-block;
        width: 32px;
        height: 16px;
        background-color: #c3ccd9;
        color: #fff;
        font-size: 12px;
        border-radius: 3px;
        text-align: center;
        line-height: 16px;
        flex-shrink: 0;
    }
    &__title {
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>